<script setup lang="ts">
import Carouse from '../components/Carouse.vue'
import { onMounted, ref } from 'vue'
import PhotoMenu from '../components/PhotoMenu.vue'

import { ElMessage, ElNotification, type TabsPaneContext } from 'element-plus';
import { storeA } from '@/piniaStore/storeA'
import router from '@/router';
import Cardfood from '../components/CartFoodsHome.vue'
import {reactive} from 'vue'
import { getlist, getuser } from '@/api/getinfo';
onMounted(() => {
  let btn: any = document.querySelector("#btn");
  //2、给页面注册scroll滚动事件
  document.addEventListener("scroll", function () {
    //（1）获取主体区域距离页面顶部的高度，等于头部区域的高度+banner区域的高度+3个margin-top的高度30
    let mainHeight = btn.scrollHeight;
    // console.log(window.innerWidth)
    //将侧边栏的高度固定在页面的顶部，不跟随页面的上下滑动而变化位置，显示返回顶部文字
    btn.style.top = (mainHeight + window.pageYOffset) + "px";
  })
})
let piniaStoreA = storeA()
//展示的图片
let foods = ref(piniaStoreA.foods)
//分页展示
const changePage = reactive({
  currentPage:1, //默认当前页面为1
  total: 20, //总共有多少数据
})
//初始化
async function fn(){
  let Foods:any = (await getlist(changePage.currentPage as unknown as string))
  console.log(Foods)
  piniaStoreA.foods = Foods.list
  changePage.total = Foods.total
   foods.value = Foods.list
  //  console.log( foods)
  if(piniaStoreA.user.Username==''){
    //更新用户信息
    await getuser(piniaStoreA.token as string,true)
  }
}
fn()
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
function getImageUrl(name: string) {
  return new URL(name, import.meta.url).href
}
const activeName = ref('first')
const dialogVisible = ref(false)
const drawer = ref(false)
//点击菜品事件
function inf(item: food) {
  showfood.value = item
  // cartfood.name = item 
  dialogVisible.value = true
}
//对话框关闭事件
function Dialogclose() {
  cartfood.num = 1
}

//确认添加购物车事件
function Addcart() {

  dialogVisible.value = false;
  cartfood.name = showfood.value
  // console.log(showfood.value)
  // console.log(cartfood.name)
  if (showfood.value === cartfood.name) {
    let ishave =false
    let isSameShop = true
    piniaStoreA.Cartfood.forEach((item)=>{
      console.log(item.name.name+"与"+cartfood.name.name)
      if(item.name.name==cartfood.name.name){
        item.num+=cartfood.num
        ishave = true
      }
      if(item.name.business!=cartfood.name.business){
        console.log(item.name.business+" "+cartfood.name.business)
        console.log("不同")
        isSameShop = false
      }
    })
    if(isSameShop){
      // console.log("新添加")
      if(!ishave){
        piniaStoreA.Cartfood.push(cartfood)
      }
    }
    else{
      ElMessage({
        message: '请添加同一个商家的菜品哦！',
        type: 'warning',
      })
    }
    // piniaStoreA.addCartfood(cartfood)
    if (isSameShop) {
      router.push({
        path: '/about',
        name: 'about',
      })
      ElNotification({
        title: '添加成功',
        message: '已添加进外卖袋，点击可回到主页继续添加！',
        type: 'success',
        showClose: false,
        duration: 3000,
        onClick: () => {
          router.push({
            path: '/',
            name: 'home',
          })
          close()
        }
      })
      piniaStoreA.times++
    }
    else {
    
    }
  }
}
var showfood = ref<food>({
  name: "宫保鸡丁",
  url: "../img/1.png",
  text: "本店招牌名菜，欢迎品尝！",
  price: 20,
  business: "成理大酒店"
})
//选中的菜品
var cartfood: cartfood = ({
  name: showfood.value,
  num: 1
})
// var cartfood:cartfood = {
//   name:showfood,
//   num:ref(1)
// }


//展示的菜品


function cancelForm() {
  drawer.value = true
}

//这里是获取当前页数
const handleCurrentChange = (val:any)=> {
  changePage.currentPage = val
  console.log( changePage.currentPage)
  fn()
}

</script>

<template>
  <el-button @click="cancelForm" class="btn" id="btn" color="#FF4800">
    <div class="text">
      打开外卖袋
    </div>
  </el-button>
  <main>
    <Carouse />
    <div id="nav">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="菜品" name="first" class="foods">
          <TransitionGroup  name="list" class="container" >
          <div v-for="item in foods" class="food"> 
            <PhotoMenu :name=item.name :url="item.url" :text="item.text" @click="inf(item)" />
          </div>
        </TransitionGroup>
        </el-tab-pane>
        <el-tab-pane label="更多" name="second">Config</el-tab-pane>
      </el-tabs>
      <div class="page">
          <el-pagination background layout="prev, pager, next" :total="changePage.total" page-size="2" @current-change="handleCurrentChange" />
         </div>
    </div>
  </main>
  <el-dialog v-model="dialogVisible" title="加入外卖袋" width="40%" align-center style="text-align: center;"
    @open="Dialogclose">
    <img :src=getImageUrl(showfood.url) alt="网络出错" style="
    height: 200px;
    width: 60%; 
    border-radius: 10px; 
    font-weight: bold;
    ">
    <h1 style=" font-weight: bold;">{{ showfood.name }}</h1>
    <div style=" background-color: yellow;
    width:50%;
    margin: 0 auto;
    border-radius: 10px;
    font-weight: bold;
    ">{{ showfood.business }}</div>
    <div style="margin-top:15px;margin-bottom:15px;">{{ showfood.text }}</div>
    <div style="display: flex; left: 33%;">
      <div style="line-height: 30px;font-size: 15px;">份数选择：</div>
      <el-input-number v-model="cartfood.num" :min="1" :max="10" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="Addcart">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <Cardfood></Cardfood>
  </el-drawer>
</template>
<style scoped>
.foods {
  display: flex;
  flex-wrap: wrap;
}

.food {
  height: 350px;
  width: 33%;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.text {
  font-size: 15px;
  writing-mode: vertical-rl;
}
.container{
  position: relative;
  padding: 0;
}

.btn {
  width: 30px;
  height: 150px;
  writing-mode: vertical-rl;
  /* 设置绝对定位，将侧边栏固定在页面上的右边区域 */
  position: absolute;
  /* 330像素正好将侧边栏与主体区域的顶部对齐 */
  top: 200px;
  left: 100%;
}
.page{
  width: 15%;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 50px;
}
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}

</style>
